<template>
  <svg class="icon" aria-hidden="true">
<!--    :fill="color"-->
    <use :xlink:href="iconNameClass"  />
  </svg>
  <slot></slot>
</template>


<script setup lang="ts">
import { ref } from 'vue';
const props = defineProps({
  iconName: {
    type: String,
    required: true
  }
});
const iconNameClass = ref("#icon-"+props.iconName)
</script>


<style scoped>
.icon {
  width: 1.5em;
  height: 2em;
  position: relative;
  fill: currentColor;
  vertical-align: -2px;
  margin: 0;
  padding:0;
}
</style>